<template>
  <div class="preview-render-area" :style="renderAreaStyle">
    <div class="preview-container" :style="previewContainerStyle">
      <PreviewRenderer 
        :components="props.components" 
        :canvas-width="props.canvasWidth" 
        :canvas-height="props.canvasHeight"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, computed, watch, type CSSProperties } from 'vue';
import PreviewRenderer from './PreviewRenderer.vue';
import { type CanvasComponent } from '@/stores/designStore';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  components: {
    type: Array as () => CanvasComponent[],
    required: true
  },
  canvasWidth: {
    type: Number,
    default: 600
  },
  canvasHeight: {
    type: Number,
    default: 400
  }
});

const emit = defineEmits(['update:visible', 'close']);

// 保留缩放功能，但简化状态
const zoomLevel = ref(1);

// 渲染区域样式，添加缩放
const renderAreaStyle = computed<CSSProperties>(() => {
  return {
    transform: `scale(${zoomLevel.value})`,
    transformOrigin: 'center center',
    transition: 'transform 0.2s ease'
  };
});

// 预览容器样式，确保宽高与画布一致
const previewContainerStyle = computed<CSSProperties>(() => {
  return {
    width: `${props.canvasWidth}px`,
    height: `${props.canvasHeight}px`,
    position: 'relative',
    overflow: 'hidden',
    boxSizing: 'border-box',
    // 添加网格背景
    backgroundImage: 'linear-gradient(45deg, #f5f5f5 25%, transparent 25%), linear-gradient(-45deg, #f5f5f5 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f5f5f5 75%), linear-gradient(-45deg, transparent 75%, #f5f5f5 75%)',
    backgroundSize: '20px 20px',
    backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',
    backgroundRepeat: 'repeat',
    border: '1px solid #dcdfe6'
  };
});
</script>

<style scoped>
.preview-render-area {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.preview-container {
  box-shadow: var(--panel-shadow, 0 2px 12px 0 rgba(0, 0, 0, 0.1));
  background-color: var(--component-bg-color, #fff);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
</style> 